<!-- 

http://jsfiddle.net/shpaker/k93hf/

http://pastebin.com/YfMH54C8


Задача

Что бы усвоить информацию и закрепить прочитанное на практике я всегда ставлю перед собой не большую цель которая бы одновременно охватывала всё прочитанное и одновременно процесс достижения 
которой было бы интересен мне самому. В данном случае я попытаюсь отрисовать уровень одной из моих самых любимых в детстве игр. Собственно за не имением времени — добавлять жизнь на него я не буду, 
а сделаю максимально понятный код охватывающий практически всё то что сегодня здесь описал.
Я воспроизвел один из уровней игры BattleCity известную у нас как Танчики, а вот и ссылка на pastebin на случай если не будет откликаться дропбокс.
На последок комментарий по примеру. В спецификациях картинки которую может выдавать Денди разрешение экрана должно быть 256×240 пикселей.
Поле боя в общеизвестнных Танчиках размером 13х13 больших блоков. Каждый из которых нарисован 4мя повторяющимися спрайтами (коих по общему подсчёту выходит на карте 26х26=676). 
Итак прикинем как было в оригинале по пикселам и как это правильно масштабировать. Если поделить 240 на 26 то выйдет что целая часть от деления будет 8. Получается что размерность текстуры 
была 8х8 пиксела т.е. размер поля боя 208х208, а большого блока 16х16. Ширина должна быть 256 пикселов. Сейчас вычислим размер правого столбца с дополнительной информацией и размер полей сверху/снизу. 
Справа если присмотреться ширина составляет размерность в два блока, итого 2*16=32. У нас уже 32+208=240 слева поле 16, а снизу и сверху соответственно так же по 16 пикселов. 
Собственно в моём примере размерность большого блока заключена в переменной cellSize, собственно все вычисления делаются иходя из её размеров. Можете по экспериментировать и поменять её значение, 
настоятельно рекомендую делать его кратным степеням двойки (16, 32, 64, 128...), если хотите чтоб всё выглядело так как на старом добром денди то устанавливайте её значение равным 16. 
Хотя и при любых других значениях всё выглядит нормально. Если то как я пишу понравится кому-то кроме меня, то напишу продолжение, а то что в нём будет пока утаю

-->

<html>

<head>

  <title>BattleCityExample</title>

</head>

<body>

  <canvas id='example'>Обновите браузер</canvas>

  <script>

	  //Tank's level
	  example = document.getElementById("example");
	  ctx = example.getContext('2d');
	  // Размер одной ячейки на карте
	  cellSize = 24;
	  // Массив карты поля боя
	  var map = [
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1],
	      [2, 2, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 2, 2],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	      ];
	  example.width = 16 * cellSize;
	  example.height = 15 * cellSize;
	  ctx.fillStyle = '#ccc';
	  ctx.fillRect(0, 0, example.width, example.height);
	  ctx.fillStyle = '#000';
	  ctx.fillRect(cellSize, cellSize, 13 * cellSize, 13 * cellSize)
	  // Цикл обрабатывающий массив в котором содержатся значения элементов карты
	  // если попадается 1 то рисуется кирпичный блок
	  // если 2, то бетонная стена
	  for (var j = 0; j < 26; j++)
	  for (var i = 0; i < 26; i++) {
	      switch (map[j][i]) {
	      case 1:
	          DrawBrick(i * cellSize / 2 + cellSize, j * cellSize / 2 + cellSize);
	          break;
	      case 2:
	          DrawHardBrick(i * cellSize / 2 + cellSize, j * cellSize / 2 + cellSize);
	          break;
	      }
	  }
	
	
	  // Рисуем часть кирпичной стены
	  function DrawBrick(x, y) {
	      // Отрисовка основного цвета кирпича
	      ctx.fillStyle = '#FFA500';
	      ctx.fillRect(x, y, cellSize / 2, cellSize / 2);
	      // Отрисовка теней
	      ctx.fillStyle = '#CD8500';
	      ctx.fillRect(x, y, cellSize / 2, cellSize / 16);
	      ctx.fillRect(x, y + cellSize / 4, cellSize / 2, cellSize / 16);
	      ctx.fillRect(x + cellSize / 4, y, cellSize / 16, cellSize / 4);
	      ctx.fillRect(x + cellSize / 16, y + cellSize / 4, cellSize / 16, cellSize / 4);
	      // Отрисовка раствора между кирпичами
	      ctx.fillStyle = '#D3D3D3';
	      ctx.fillRect(x, y + cellSize / 4 - cellSize / 16, cellSize / 2, cellSize / 16);
	      ctx.fillRect(x, y + cellSize / 2 - cellSize / 16, cellSize / 2, cellSize / 16);
	      ctx.fillRect(x + cellSize / 4 - cellSize / 16, y, cellSize / 16, cellSize / 4);
	      ctx.fillRect(x, y + cellSize / 4 - cellSize / 16, cellSize / 16, cellSize / 4);
	  }
	
	  // Рисуем часть бетонного блока
	  function DrawHardBrick(x, y) {
	      // Отрисовка основного фона
	      ctx.fillStyle = '#cccccc';
	      ctx.fillRect(x, y, cellSize / 2, cellSize / 2);
	      // Отрисовка Тени
	      ctx.fillStyle = '#909090';
	      ctx.beginPath();
	      ctx.moveTo(x, y + cellSize / 2);
	      ctx.lineTo(x + cellSize / 2, y + cellSize / 2);
	      ctx.lineTo(x + cellSize / 2, y);
	      ctx.fill();
	      // Отрисовка белого прямоугольника сверху
	      ctx.fillStyle = '#eeeeee';
	      ctx.fillRect(x + cellSize / 8, y + cellSize / 8, cellSize / 4, cellSize / 4);
	  }

  </script>

</body>

</html>
